<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:100px; height:100px; background:red; position:absolute; top:100px; left:50px;}
</style>
<script>
window.onload = function(){
	var oBtn1 = document.getElementById('btn1');
	var oBtn2 = document.getElementById('btn2');
	var oDiv = document.getElementById('div1');
	
	oBtn1.onclick = function(){
		clearInterval(oDiv.timer);															//处理重复点击加快的问题

		oDiv.timer = setInterval(function(){										//记得oDiv.timer,没有var
			var speed = parseInt(getStyle(oDiv,'left'))+ 10;			//getStyle()出来的是带有px单位的数字，所以需要转成数字

			if(speed>800){
				speed = 800;																					//先赋值限速，不能用 == 、===
														//需要设置关闭定时器，如果不关闭的话，用alert(speed),到达终点还是会一直弹出800
			}
			oDiv.style.left = speed + 'px';												//记得px
		},20)
		if(speed==50){
				clearInterval(oDiv.timer)
			}
	}
	
	oBtn2.onclick = function(){
		clearInterval(oDiv.timer)

		oDiv.timer = setInterval(function(){
			var speed = parseInt(getStyle(oDiv,'left')) + -13;

			if(speed<50){
				speed = 50;
			}
			oDiv.style.left = speed + 'px';	
		},20)
		if(speed==50){
				clearInterval(oDiv.timer)
			}
	}
	
}	
	function getStyle(obj,attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
</script>
</head>
<body>
<input id="btn2" type="button" value="向后">
<input id="btn1" type="button" value="向前">
<div id="div1"></div>
</body>
</html>
